<template>
  <div>
    <s-title text="经济运行"></s-title>
    <div class="ecoOperationcon">
      <div class="ecotop">
        <div
          :style="item.active ? 'color:yellow' : ''"
          class="ecotop-item"
          v-for="(item, index) in top"
          :key="index"
          @click="tchangehandle(index)"
        >
          <el-tooltip
            content="点击切换表格"
            placement="top-start"
            :disabled="index === 2 ? true : false"
            effect="dark"
          >
            <div>
              <span class="name">{{ item.name }}</span>
              <span class="value">{{ item.value }}</span>
              <span class="font">{{ item.font }}</span>
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="ecotable">
        <div v-show="tableshow">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="260"
            ref="table"
          >
            <el-table-column
              prop="name"
              label="名称"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="build"
              label="楼宇"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="标签" width="165">
              <template slot-scope="scope">
                <span
                  v-show="scope.row.label.indexOf(0) === -1 ? false : true"
                  class="label gq"
                  >高企</span
                >
                <span
                  v-show="scope.row.label.indexOf(1) === -1 ? false : true"
                  class="label gs"
                  >规上</span
                >
                <span
                  v-show="scope.row.label.indexOf(2) === -1 ? false : true"
                  class="label ls"
                  >落税</span
                >
                <span
                  v-show="scope.row.label.indexOf(3) === -1 ? false : true"
                  class="label jy"
                  >经营</span
                >
                <span
                  v-show="scope.row.label.indexOf(4) === -1 ? false : true"
                  class="label bw"
                  >百万</span
                >
                <span
                  v-show="scope.row.label.indexOf(5) === -1 ? false : true"
                  class="label zb"
                  >总部</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="regist"
              label="注册资本（万元） "
              width="150"
            >
            </el-table-column>
          </el-table>

          <div class="ecotabledesc">
            <div class="ecotabledesc-item">
              <span class="label gq">高企</span>
              <span class="font">高新技术企业</span>
            </div>
            <div class="ecotabledesc-item">
              <span class="label gs">规上</span>
              <span class="font">规模以上企业</span>
            </div>
            <div class="ecotabledesc-item">
              <span class="label ls">落税</span>
              <span class="font">落税黄浦</span>
            </div>
            <div class="ecotabledesc-item">
              <span class="label jy">经营</span>
              <span class="font">经营黄浦</span>
            </div>
            <div class="ecotabledesc-item">
              <span class="label bw">百万</span>
              <span class="font">税收百万以上</span>
            </div>
            <div class="ecotabledesc-item">
              <span class="label zb">总部</span>
              <span class="font">总部企业</span>
            </div>
          </div>
        </div>
        <div v-show="!tableshow">
          <el-table
            :data="tableData2"
            style="width: 100%"
            height="290"
            ref="table2"
          >
           <el-table-column
              prop="rank"
              label="排名"
              width="130"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="buildName"
              label="名称"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="grade"
              label="等级"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
           
            <el-table-column
              prop="taxDensity"
              label="税收密度（元/m²） "
              width="170"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import common from "../../../assets/common";
import { quota, companylist, buildlist } from "../../../utils/api";
export default {
  name: "ecoOperation",
  components: {
    sTitle,
  },
  data() {
    return {
      top: [
        {
          name: "重点企业",
          value: 31,
          font: "家",
          active: true,
        },
        {
          name: "重点楼宇",
          value: 6,
          font: "栋",
          active: false,
        },
        {
          name: "落税率",
          value: 45.16,
          font: "%",
        },
      ],
      tableData: [
        {
          name: "赛生医药（中国）有限公司",
          build: "中环大厦",
          label: [1,2, 3, 4],
          regist: "5000",
        },
        {
          name: "富兰克林柯维商务咨询（上海）有限公司",
          build: "中环大厦",
          label: [1, 2, 3, 4],
          regist: "965.79",
        },
        {
          name: "美国船级社（中国）有限公司",
          build: "永银大厦",
          label: [1, 2, 3, 4,5],
          regist: "8278.2",
        },
        {
          name: "乌曼包装技术（上海）有限公司",
          build: "永银大厦",
          label: [1,2, 3, 4],
          regist: "115.88",
        },
        {
          name: "上海功达物业管理有限公司",
          build: "永银大厦",
          label: [1,2, 3, 4],
          regist: "100",
        },
        {
          name: "徕卡相机贸易（上海）有限公司",
          build: "新茂大厦",
          label: [1,2, 3,4],
          regist: "1158.83",
        },
        {
          name: "上海科铂微电子有限公司",
          build: "新茂大厦",
          label: [2, 3, 4,1],
          regist: "724.34",
        },
        {
          name: "楷亚锐衡设计规划咨询（上海）有限公司",
          build: "新茂大厦",
          label: [1,2, 3, 4],
          regist: "137.97",
        },
        {
          name: "安进生物技术咨询（上海）有限公司",
          build: "新茂大厦",
          label: [1,2, 3, 4],
          regist: "100",
        },
        {
          name: "罗森（中国）投资有限公司",
          build: "香港广场",
          label: [1,2, 3, 4],
          regist: "274945",
        },
        {
          name: "君创国际融资租赁有限公司",
          build: "无限极大厦",
          label: [5, 2, 3, 4],
          regist: "202000",
        },
        {
          name: "普华永道管理咨询（上海）有限公司",
          build: "无限极大厦",
          label: [1, 2, 3, 4],
          regist: "8278.2",
        },
        {
          name: "保乐力加（中国）贸易有限公司",
          build: "无限极大厦",
          label: [1, 2, 3, 4,5],
          regist: "4208.09",
        },
        {
          name: "麦肯锡（上海）咨询有限公司",
          build: "无限极大厦",
          label: [1,2, 3, 4,5],
          regist: "758.84",
        },
        {
          name: "神华销售集团华东能源有限公司",
          build: "神华煤炭大厦",
          label: [1,2, 3, 4,5],
          regist: "5000",
        },
      ],
      tableData2: [],
      tableshow: true,
      selIndex: 0,
    };
  },
  mounted() {
    common.tableScroll(this.$refs.table);
    common.tableScroll(this.$refs.table2);
    quota(
      JSON.stringify({
        streetName: "淮海中路街道",
      })
    ).then((res) => {
      if (res.status === 200) {
        this.top[0].value = res.data.data[0].corpCount;
        this.top[1].value = res.data.data[0].buildingCount;
        this.top[2].value = res.data.data[0].taxPercentage;
      }
    });
    this.getcompanylist();
  },
  methods: {
    getcompanylist() {
      companylist(
        JSON.stringify({
          streetName: "淮海中路街道",
        })
      ).then((res) => {
        if (res.status === 200) {
          this.tableData = [];
          for (let i = 0, l = res.data.data.length; i < l; i++) {
            let obj = {};
            obj.label = [];
            res.data.data[i].isHignTech === "1" ? obj.label.push(0) : "";
            res.data.data[i].isScaleOver === "1" ? obj.label.push(1) : "";
            res.data.data[i].isTaxHp === "1" ? obj.label.push(2) : "";
            res.data.data[i].isWorkHp === "1" ? obj.label.push(3) : "";
            res.data.data[i].isTaxOver === "1" ? obj.label.push(4) : "";
            res.data.data[i].isHq === "1" ? obj.label.push(5) : "";
            obj.name = res.data.data[i].corpName;
            obj.regist = res.data.data[i].regCapital;
            obj.build = res.data.data[i].building;
            this.tableData.push(obj);
          }
        }
      });
    },
    getbuildlist() {
      buildlist(
        JSON.stringify({
          streetName: "淮海中路街道",
        })
      ).then((res) => {
        if (res.status === 200) {
          this.tableData2 = res.data.data;
        }
      });
    },
    tchangehandle(index) {
      this.top[this.selIndex].active = false;
      this.top[index].active = true;
      this.selIndex = index;
      if (index === 0) {
        this.tableshow = true;

        this.getcompanylist();
      } else if (index === 1) {
        this.tableshow = false;
        this.getbuildlist();
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ecoOperationcon {
  width: 100%;
  height: 370px;
  color: #fff;
}
.ecotop {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
}
.ecotop-item {
  width: 190px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: url(~@/assets/image/right2/content-item.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.ecotop-item .value {
  color: #fedc85;
  font-weight: bold;
  font-size: 20px;
}
.ecotop-item .fomt {
  font-size: 13px;
}
.ecotable {
  width: 95%;
  margin: auto;
  height: 250px;
}
.label {
  display: inline-block;
  padding: 0px 5px;
  transform: skew(-20deg);
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
}
.gq {
  background: #00aeff;
}
.gs {
  background: #ca7631;
}
.ls {
  background: #17cac5;
}

.jy {
  background: #3b40d2;
}
.bw {
  background: #98785e;
}
.zb {
  background: #8598b6;
}
.ecotabledesc {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.ecotabledesc-item .font {
  font-size: 12px;
}
</style>
 